<template>
  <view class="detail-container">
    <!-- 悬浮按钮组 -->
    <view class="float-buttons">
      <back-button></back-button>
      <view class="float-btn-right">
        <view class="float-btn delete" v-if="isMyPost" @tap="showActionSheet">
          <uni-icons type="trash" size="20" color="#333"></uni-icons>
        </view>
        <view class="float-btn share" @tap="handleShare">
          <uni-icons type="redo" size="20" color="#333"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 帖子内容区 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      @scrolltolower="loadMoreComments"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 图片轮播 -->
      <swiper 
        class="image-swiper" 
        :indicator-dots="postDetail.images.length > 1"
        :autoplay="false"
        :duration="300"
        circular
      >
        <swiper-item 
          v-for="(image, index) in postDetail.images" 
          :key="index"
          @tap="previewImage(index)"
        >
          <image :src="image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

      <!-- 内容区域 -->
      <view class="post-content">
        <!-- 用户信息 -->
        <view class="user-info">
          <image class="avatar" :src="postDetail.userAvatar" mode="aspectFill" @tap="goUserSpace"></image>
          <view class="user-meta">
            <text class="nickname">{{ postDetail.userNickname }}</text>
            <text class="time">{{ formatDateTime(postDetail.createTime) }}</text>
          </view>
          <!-- 查看自己的帖子时，关注按钮就不会显示了 -->
          <button 
            class="follow-btn" 
            :class="{ active: postDetail.isFollowed }"
            @tap="handleFollow"
            v-if="postDetail.userId && postDetail.userId !== currentUserId && currentUserId && !isMyPost"
          >
            {{ postDetail.isFollowed ? '已关注' : '关注' }}
          </button>
        </view>

        <!-- 帖子标题和内容 -->
        <view class="post-text">
          <text class="title">{{ postDetail.title }}</text>
          <text class="content">{{ postDetail.content }}</text>
        </view>

        <!-- 话题标签 -->
        <view class="topic-tags" v-if="postDetail.topics && postDetail.topics.length > 0">
          <view class="tag-item" v-for="(topic, index) in postDetail.topics" :key="index">
            #{{ topic }}
          </view>
        </view>

        <!-- 互动数据 -->
        <view class="interaction-bar">
          <view class="interaction-item">
            <uni-icons type="eye" size="20" color="#999"></uni-icons>
            <text>{{ postDetail.viewCount }}</text>
          </view>
          <view class="interaction-item" @tap="handleLike">
            <uni-icons 
              :type="postDetail.isLiked ? 'heart-filled' : 'heart'" 
              size="20" 
              :color="postDetail.isLiked ? '#ff4757' : '#999'"
            ></uni-icons>
            <text>{{ postDetail.likeCount }}</text>
          </view>
          <view class="interaction-item">
            <uni-icons type="chat" size="20" color="#999"></uni-icons>
            <text>{{ postDetail.commentCount }}</text>
          </view>
          <view class="interaction-item" @tap="handleFavorite">
            <uni-icons 
              :type="postDetail.isFavorited ? 'star-filled' : 'star'" 
              size="20" 
              :color="postDetail.isFavorited ? '#ff4757' : '#999'"
            ></uni-icons>
            <text>收藏</text>
          </view>
        </view>

        <!-- 评论区分割线 -->
        <view class="divider"></view>

        <!-- 评论区域 -->
        <view class="comments-section">
          <view class="section-title">评论 {{ comments.length }}</view>
          <view class="comment-list">
            <view v-if="comments && comments.length > 0">
              <!-- 评论列表内容 -->
              <view class="comment-item" v-for="comment in comments" :key="comment.id">
                <!-- 主评论 -->
                <view class="comment-main">
                  <image class="avatar" :src="comment.userAvatar" mode="aspectFill" @tap="goToUserSpace(comment.userId)"></image>
                  <view class="comment-content">
                    <view class="comment-header">
                      <text class="nickname" @tap="goToUserSpace(comment.userId)">{{ comment.userNickname }}</text>
                      <text class="time">{{ formatDateTime(comment.createTime) }}</text>
                    </view>
                    <text class="content">{{ comment.content }}</text>
                  </view>
                </view>

                <!-- 回复区域 -->
                <view class="reply-section" v-if="comment.children && comment.children.length > 0">
                  <!-- 第一条回复 -->
                  <view class="reply-item">
                    <image class="reply-avatar" :src="comment.children[0].userAvatar" mode="aspectFill" @tap="goToUserSpace(comment.children[0].userId)"></image>
                    <view class="reply-content">
                      <view class="reply-header">
                        <text class="nickname" @tap="goToUserSpace(comment.children[0].userId)">{{ comment.children[0].userNickname }}</text>
                        <text class="time">{{ formatDateTime(comment.children[0].createTime) }}</text>
                      </view>
                      <text class="content">{{ comment.children[0].content }}</text>
                    </view>
                  </view>

                  <!-- 其他回复列表 -->
                  <view class="reply-list" v-if="comment.children.length > 1 && comment.isShowReplies">
                    <view class="reply-item" v-for="reply in comment.children.slice(1)" :key="reply.id">
                      <image class="reply-avatar" :src="reply.userAvatar" mode="aspectFill" @tap="goToUserSpace(reply.userId)"></image>
                      <view class="reply-content">
                        <view class="reply-header">
                          <text class="nickname" @tap="goToUserSpace(reply.userId)">{{ reply.userNickname }}</text>
                          <text class="time">{{ formatDateTime(reply.createTime) }}</text>
                        </view>
                        <text class="content">{{ reply.content }}</text>
                      </view>
                    </view>
                  </view>

                  <!-- 展开回复按钮 -->
                  <view 
                    v-if="comment.children.length > 1" 
                    class="expand-replies" 
                    @click="loadReplies(comment)"
                  >
                    <text>{{ comment.isShowReplies ? '收起回复' : `展开${comment.children.length - 1}条回复` }}</text>
                    <uni-icons 
                      :type="comment.isShowReplies ? 'top' : 'bottom'" 
                      size="12" 
                      color="#666"
                    ></uni-icons>
                  </view>
                </view>

                <!-- 评论操作区 -->
                <view class="comment-actions">
                  <view class="action-btn reply-btn" @click="handleReply(comment)">
                    <uni-icons type="chat" size="16" color="#999"></uni-icons>
                    <text>回复</text>
                  </view>
                  <view class="action-btn like-btn" @click="likeComment(comment)">
                    <uni-icons 
                      :type="comment.isLiked ? 'heart-filled' : 'heart'" 
                      size="16" 
                      :color="comment.isLiked ? '#ff5500' : '#999'"
                    ></uni-icons>
                    <text>{{ comment.likeCount || '' }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="empty-comment" v-else>
              <text>暂无评论，快来抢沙发吧~</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部评论栏 -->
    <view class="bottom-bar">
      <view class="comment-input">
        <view class="reply-status" v-if="replyComment">
          <text>回复 @{{replyComment.userNickname}}</text>
          <uni-icons type="close" size="20" color="#999" @click="cancelReply"></uni-icons>
        </view>
        <input 
          type="text"
          v-model="commentContent"
          :placeholder="replyComment ? '回复评论...' : '说点什么...'"
          @focus="handleInputFocus"
          @blur="handleInputBlur"
        />
      </view>
      <button class="submit-btn" @tap="submitComment">发送</button>
    </view>
  </view>
</template>

<script>
import { formatTime, formatDateTime } from '@/utils/date'
import { isLoggedIn } from '@/utils/auth'
import BackButton from '@/components/common/BackButton.vue'
import { ref } from 'vue'

export default {
  components: {
    BackButton
  },
  data() {
    return {
      postId: null,
      currentUserId: null,
      postDetail: {
        id: null,
        userId: null,
        userNickname: '未知用户',
        userAvatar: '/static/images/default-avatar.png',
        title: '',
        content: '',
        images: [],
        viewCount: 0,
        likeCount: 0,
        commentCount: 0,
        createTime: null,
        isLiked: false,
        isFavorited: false,
        isFollowed: false
      },
      comments: [],
      commentContent: '',
      isRefreshing: false,
      commentPage: 1,
      commentPageSize: 20,
      loadMoreStatus: 'more',
      keyboardHeight: 0,
      replyComment: null,
      isMyPost: false,
      userInfo: null,
      expandedComments: new Set(),
    }
  },

  onLoad(options) {
    this.postId = options.id
    const userInfo = uni.getStorageSync('userInfo')
    this.currentUserId = userInfo ? userInfo.id : null
    
    if (options.userId) {
      this.postDetail = {
        ...this.postDetail,
        userId: options.userId,
        userNickname: decodeURIComponent(options.userNickname || '') || '未知用户',
        userAvatar: decodeURIComponent(options.userAvatar || '') || '/static/images/default-avatar.png'
      }
    }
    
    this.loadPostDetail()
    this.loadComments()
    this.userInfo = uni.getStorageSync('userInfo') || null
  },

  methods: {
    formatDateTime,

    async loadPostDetail() {
      try {
        const postRes = await this.$api.community.posts.detail(this.postId)

        if (postRes.code === 200 && postRes.data) {
          const currentUserInfo = {
            userId: this.postDetail.userId,
            userNickname: this.postDetail.userNickname,
            userAvatar: this.postDetail.userAvatar
          }
          
          this.postDetail = {
            ...postRes.data,
            userId: currentUserInfo.userId || postRes.data.userId,
            userNickname: currentUserInfo.userNickname || postRes.data.userNickname || '未知用户',
            userAvatar: currentUserInfo.userAvatar || postRes.data.userAvatar || '/static/images/default-avatar.png',
            images: postRes.data.images || [],
            viewCount: postRes.data.viewCount || 0,
            likeCount: postRes.data.likeCount || 0,
            commentCount: postRes.data.commentCount || 0,
            isLiked: postRes.data.isLiked || false,
            isFavorited: postRes.data.isFavorited || false,
            isFollowed: false
          }

          this.isMyPost = this.userInfo && this.postDetail.userId === this.userInfo.id

          if (this.currentUserId && !this.isMyPost && this.postDetail.userId) {
            try {
              const followRes = await this.$api.community.follow.checkIsFollowed(this.postDetail.userId)
              if (followRes.code === 200) {
                this.postDetail.isFollowed = followRes.data
              }
            } catch (error) {
              console.error('检查关注状态失败:', error)
            }
          }
        }
      } catch (error) {
        console.error('加载帖子详情失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      }
    },

    async loadComments() {
      try {
        const res = await this.$api.community.comment.list(this.postId)
        if (res.code === 200 && res.data) {
          this.comments = res.data.records.map(comment => ({
            ...comment,
            isShowReplies: false,
            userAvatar: comment.userAvatar || '/static/images/default-avatar.png',
            userNickname: comment.userNickname || '匿名用户',
            children: Array.isArray(comment.children) ? comment.children.map(reply => ({
              ...reply,
              userAvatar: reply.userAvatar || '/static/images/default-avatar.png',
              userNickname: reply.userNickname || '匿名用户'
            })) : []
          }))
          
          console.log('格式化后的评论数据:', this.comments)
        }
      } catch (error) {
        console.error('加载评论失败:', error)
      }
    },

    loadReplies(comment) {
      comment.isShowReplies = !comment.isShowReplies
      console.log('切换回复显示状态:', comment.id, comment.isShowReplies)
    },

    handleReply(comment) {
      if (!this.checkLogin()) return
      
      this.replyComment = comment
      this.$nextTick(() => {
        const inputEl = this.$refs.commentInput
        if (inputEl) {
          inputEl.focus()
        }
      })
    },

    async submitComment() {
      if (!this.checkLogin()) return
      
      if (!this.commentContent.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        })
        return
      }

      try {
        const data = {
          postId: this.postId,
          content: this.commentContent.trim(),
          parentId: this.replyComment?.id || null
        }

        const res = await this.$api.community.comment.create(this.postId, this.commentContent.trim(), this.replyComment?.id)
        
        if (res.code === 200) {
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          })
          
          this.commentContent = ''
          this.replyComment = null
          
          await this.loadComments()
          
          if (data.parentId) {
            const parentComment = this.comments.find(c => c.id === data.parentId)
            if (parentComment) {
              this.$set(parentComment, 'isShowReplies', true)
            }
          }
        }
      } catch (error) {
        console.error('提交评论失败:', error)
        uni.showToast({
          title: '评论失败',
          icon: 'none'
        })
      }
    },

    cancelReply() {
      this.replyComment = null
    },

    checkLogin() {
      if (!isLoggedIn()) {
        uni.navigateTo({
          url: '/pages/user/auth/login'
        })
        return false
      }
      return true
    },

    async handleLike() {
      if (!isLoggedIn()) {
        uni.navigateTo({ url: '/pages/user/auth/login' })
        return
      }

      try {
        if (this.postDetail.isLiked) {
          await this.$api.community.posts.unlike(this.postId)
          this.postDetail.likeCount--
        } else {
          await this.$api.community.posts.like(this.postId)
          this.postDetail.likeCount++
        }
        this.postDetail.isLiked = !this.postDetail.isLiked
      } catch (error) {
        console.error('点赞操作失败:', error)
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    },

    async handleFavorite() {
      if (!isLoggedIn()) {
        uni.navigateTo({ url: '/pages/user/auth/login' })
        return
      }

      try {
        if (this.postDetail.isFavorited) {
          await this.$api.community.posts.unfavorite(this.postId)
        } else {
          await this.$api.community.posts.favorite(this.postId)
        }
        this.postDetail.isFavorited = !this.postDetail.isFavorited
        
        uni.showToast({
          title: this.postDetail.isFavorited ? '收藏成功' : '已取消收藏',
          icon: 'success'
        })
      } catch (error) {
        console.error('收藏操作失败:', error)
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    },

    async handleCommentLike(comment) {
      if (!isLoggedIn()) {
        uni.navigateTo({ url: '/pages/user/auth/login' })
        return
      }

      try {
        await this.$api.community.comment.like(comment.id)
        comment.isLiked = !comment.isLiked
        comment.likeCount = comment.isLiked ? comment.likeCount + 1 : comment.likeCount - 1
      } catch (error) {
        console.error('评论点赞失败:', error)
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    },

    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },

    previewImage(index) {
      uni.previewImage({
        urls: this.postDetail.images,
        current: index
      })
    },

    loadMoreComments() {
      if (this.loadMoreStatus === 'more') {
        this.commentPage++
        this.loadComments()
      }
    },

    async onRefresh() {
      this.isRefreshing = true
      await Promise.all([
        this.loadPostDetail(),
        this.loadComments(true)
      ])
      this.isRefreshing = false
    },

    handleInputFocus(e) {
      this.keyboardHeight = e.detail.height || 0
    },

    handleInputBlur() {
      this.keyboardHeight = 0
    },

    async handleFollow() {
      if (!isLoggedIn()) {
        uni.navigateTo({
          url: '/pages/user/auth/login'
        })
        return
      }

      try {
        if (this.postDetail.isFollowed) {
          await this.$api.community.follow.unfollowUser(this.postDetail.userId)
          this.postDetail.isFollowed = false
              uni.showToast({
            title: '已取消关注',
                icon: 'success'
              })
        } else {
          await this.$api.community.follow.followUser(this.postDetail.userId)
          this.postDetail.isFollowed = true
          uni.showToast({
            title: '关注成功',
            icon: 'success'
          })
        }
            } catch (error) {
        console.error('关注操作失败:', error)
              uni.showToast({
          title: error.message || '操作失败',
                icon: 'none'
              })
            }
    },

    goUserSpace() {
      if (this.postDetail.userId) {
        uni.navigateTo({
          url: `/pages/community/user/index?userId=${this.postDetail.userId}`
        })
      }
    },

    showActionSheet() {
      uni.showActionSheet({
        itemList: ['删除'],
        itemColor: '#ff5500',
        success: (res) => {
          if (res.tapIndex === 0) {
            this.handleDelete()
          }
        }
      })
    },
    
    async handleDelete() {
      try {
        const confirmRes = await uni.showModal({
          title: '提示',
          content: '确定要删除这条帖子吗？',
          confirmColor: '#ff5500'
        })
        
        if (!confirmRes.confirm) return
        
        uni.showLoading({
          title: '删除中...',
          mask: true
        })
        
        await this.$api.community.posts.delete(this.postId)
        
        uni.hideLoading()
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          const pages = getCurrentPages()
          
          let spacePageIndex = -1
          for (let i = pages.length - 1; i >= 0; i--) {
            if (pages[i].route === 'pages/community/user/index') {
              spacePageIndex = i
              break
            }
          }
          
          if (spacePageIndex !== -1) {
            const spacePage = pages[spacePageIndex]
            if (spacePage.$vm) {
              spacePage.$vm.loadPosts(true)
            }
            uni.navigateBack({
              delta: pages.length - spacePageIndex - 1
            })
          } else {
            uni.redirectTo({
              url: '/pages/community/user/index'
            })
          }
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        console.error('删除帖子失败:', error)
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        })
      }
    },

    goToUserSpace(userId) {
      if (userId) {
        uni.navigateTo({
          url: `/pages/community/user/index?userId=${userId}`
        })
      }
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #fff;
  position: relative;
}

.content-scroll {
  height: 100vh;
  background: #fff;
}

.float-buttons {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.image-swiper {
  width: 100%;
  height: 100vw;  /* 正方形图片区域 */
  background: #000;
  
  swiper-item {
    width: 100%;
    height: 100%;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.post-content {
  padding: 0 0 120rpx;
  background: #fff;
  
  .post-text {
    padding: 32rpx;
    
    .title {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 16rpx;
      line-height: 1.4;
    }
    
    .content {
      font-size: 30rpx;
      color: #333;
      line-height: 1.6;
    }
  }
  
  .topic-tags {
    padding: 0 32rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 24rpx;
    
    .tag-item {
      font-size: 26rpx;
      color: #666;
      padding: 8rpx 20rpx;
      background: #f8f8f8;
      border-radius: 26rpx;
    }
  }
}

.user-info {
  display: flex;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: none;
  }

  .user-meta {
    flex: 1;

    .nickname {
      font-size: 30rpx;
      color: #333;
      font-weight: 600;
    }

    .time {
      font-size: 24rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }

  .follow-btn {
    min-width: 140rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 26rpx;
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
    border-radius: 32rpx;
    padding: 0 24rpx;
    margin: 0;
    
    &.active {
      color: #999;
      background: #f5f5f5;
    }
  }
}

.interaction-bar {
  display: flex;
  justify-content: space-around;
  padding: 24rpx 0;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 24rpx;

  .interaction-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 24rpx;
    
    text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.divider {
  height: 16rpx;
  background: #f8f8f8;
}

.comments-section {
  background: #fff;
  padding: 32rpx;

  .section-title {
    font-size: 36rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 32rpx;
  }

  .comment-list {
    padding: 20rpx;
    
    .comment-item {
      margin-bottom: 32rpx;
      
      .comment-main {
        display: flex;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        
        .comment-content {
          flex: 1;
          
          .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            
            .nickname {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
              margin-right: 12rpx;
            }
            
            .time {
              font-size: 24rpx;
              color: #999;
            }
          }
          
          .content {
            font-size: 28rpx;
            color: #333;
            line-height: 1.5;
          }
        }
      }
      
      .reply-section {
        margin-left: 80rpx;
        
        .reply-item {
          display: flex;
          margin-bottom: 16rpx;
          
          .reply-avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 12rpx;
          }
          
          .reply-content {
            flex: 1;
            
            .reply-header {
              display: flex;
              align-items: center;
              margin-bottom: 6rpx;
              
              .nickname {
                font-size: 26rpx;
                color: #333;
                font-weight: 500;
                margin-right: 12rpx;
              }
              
              .time {
                font-size: 22rpx;
                color: #999;
              }
            }
            
            .content {
              font-size: 26rpx;
              color: #333;
              line-height: 1.5;
            }
          }
        }
        
        .expand-replies {
          display: flex;
          align-items: center;
          padding: 16rpx 0;
          
          text {
            font-size: 26rpx;
            color: #666;
            margin-right: 8rpx;
          }
          
          &:active {
            opacity: 0.7;
          }
        }
      }
      
      .comment-actions {
        display: flex;
        justify-content: flex-end;
        gap: 24rpx;
        margin-top: 16rpx;
        
        .action-btn {
          display: flex;
          align-items: center;
          gap: 4rpx;
          
          text {
            font-size: 24rpx;
            color: #999;
          }
          
          &:active {
            opacity: 0.7;
          }
        }
      }
    }
  }
  
  .empty-comment {
    text-align: center;
    padding: 60rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 24rpx;
  z-index: 99;

  .comment-input {
    flex: 1;
    background: #f8f8f8;
    border-radius: 36rpx;
    padding: 20rpx 32rpx;
    font-size: 30rpx;
    color: #333;
    min-height: 72rpx;
    display: flex;
    align-items: center;

    .reply-status {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 8rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }

    input {
      flex: 1;
      height: 100%;
      font-size: 30rpx;
    }
  }

  .submit-btn {
    width: 140rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    background: linear-gradient(45deg, #ff4757, #ff6b81);
    color: #fff;
    font-size: 30rpx;
    border-radius: 36rpx;
    padding: 0;
    margin: 0;
    transition: all 0.3s;

    &:active {
      transform: scale(0.95);
    }

    &[disabled] {
      background: #f5f5f5;
      color: #999;
    }
  }
}
</style> 